import React from 'react';
import TweenOne from 'rc-tween-one';
import './collectionProgress.scss';
import playerStore from 'js/store/playerStore';

export default class CollectionProgress extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            width: 100,
            maxHp: props.maxHp,
            hp: props.hp,
            actionWidth: 100,
            animationPlayState: 'paused',
            showAction: false,
        }
    }
    start = () => {
        let { maxHp, hp, width } = this.state;
        if (maxHp) {
            let itemsConfig = window.totalConfig.item;
            let tool;
            let cardType = this.props.cardType;
            let player = playerStore.player;
            switch (cardType) {
                case 2:
                    tool = player.bag.collectionItem;
                    break;
                case 3:
                    tool = player.bag.cutItem;
                    break;
                case 4:
                    tool = player.bag.miningItem;
                    break;
                default:
                    return;
            }
            if (!tool) {
                window.eventHandle.emit('log', '没有工具');
                return
            }
            let toolId = tool.templateId;
            let toolConfigInfo = itemsConfig[toolId];
            this.setState({ animationPlayState: 'running', showAction: true })
            let timer = setInterval(() => {
                hp = hp - toolConfigInfo.hurt;
                if (hp < 0) {
                    hp = 0
                }
                width = hp / maxHp * 100;
                tool.hp -= 1;
                this.setState({ width: width }, () => {
                    if (this.props.action) {
                        this.props.action()
                    }
                })
                if (hp <= 0) {
                    clearInterval(timer);
                    this.setState({ animationPlayState: 'paused' }, () => {
                        setTimeout(() => {
                            if (this.props.onEnd) {
                                this.props.onEnd();
                            }
                        }, 200);
                    });
                }
            }, 1000)
        } else {
            this.setState({ animationPlayState: 'running', showAction: true })
            setTimeout(() => {
                this.setState({ animationPlayState: 'paused' }, () => {
                    if (this.props.onEnd) {
                        this.props.onEnd();
                    }
                })
            }, 1000)
        }
    }
    render() {
        let { width, actionWidth, animationPlayState, showAction } = this.state;
        return <div className="collectionProgress">
            <div className="collectionProgressMain" onClick={this.start}>
                <div style={{ width: width + '%' }} className="pb-bar"></div>
                <div className="collectionProgress-content">{this.props.children}</div>
            </div>
            {showAction === true &&
                <div className="collectionProgressMainAction">
                    <div style={{ animationPlayState: animationPlayState }} className="pb-bar"></div>
                </div>}
        </div>
    }
}
